<template>
    <div class="bulkpay-check">
        <h2>
            <img src="@/assets/images/order/dialog-bulkpay.png" alt="">
            <strong>Bulk pay</strong>
        </h2>
        <div class="bulkpay-table">

            <div class="table-title">
                <p>
                    <span>Source</span>
                    <span>Recipient</span>
                    <span>Date</span>
                    <span>Total</span>
                    <span>Status</span>
                </p>
            </div>

            <ul class="table-body">
                <li v-for="item in select" :key="item.order_code">
                    <StoreIconOrder :item="item" />
                    <p class="table-name" v-text="item.first_name"></p>
                    <p v-text="$timeFormat(new Date(item.created_at).getTime())"></p>
                    <CommonCurrencyRate :price="item.total_money" />
                    <div class="table-status">
                        <p v-if="item.error" v-text="item.error" status="error"></p>
                        <p v-else-if="result == 'success'" status="success">Paid</p>
                        <p v-else-if="item.state == 0" status="warning">Unpaid</p>
                    </div>
                </li>
            </ul>

        </div>

        <!-- 成功 -->
        <div class="bulkpay-success" v-if="result == 'success'">
            <figure>
                <svg-icon name="checkbox-active" />
            </figure>
            <p>
                <em v-text="payinfo.unpaid.length"></em>
                <span>orders paid successfully</span>
            </p>
            <h3>
                <CommonCurrencyRate :price="payinfo.total" />
            </h3>
        </div>

        <!-- 其他状态 -->
        <div class="bulkpay-payment" v-else>
            <h2>Overview</h2>
            <h3>You have selected <br /><em v-text="select.length"></em> orders</h3>

            <div class="bulkpay-payment-status" v-show="payinfo.stock.length > 0">
                <strong>Out of stock</strong>
                <span v-text="payinfo.stock.length"></span>
            </div>

            <div class="bulkpay-payment-amount">
                <p>
                    <strong>Unpaid</strong>
                    <span v-text="payinfo.unpaid.length"></span>
                </p>
                <CommonCurrencyRate :price="payinfo.total" />

                <button @click="confirm()" type="primary"
                        :disabled="payinfo.unpaid.length == 0 || loading || error">Proceed to pay</button>
            </div>
        </div>

        <UxLoading2 :loading="loading" />
    </div>
</template>
<script>
export default {
    name: "OrderBulkpayCheck",
    props: {
        select: { type: Array, default: () => [] },
        result: { type: String, default: "" },
    },
    data () {
        return {
            loading: true,
            error: null,
            payinfo: {
                stock: [],
                unpaid: [],
                total: 0,
            },
        };
    },
    methods: {
        // 确定下单
        confirm () {
            this.$emit("confirm", {
                codes: this.payinfo.unpaid.map((i) => i.order_code).join("|"),
                amount: this.payinfo.total,
            });
        },
        async getOrderStatue () {
            let selectObject = {};
            let codes = [];

            this.loading = true;
            this.select.map((item) => {
                codes.push(item.order_code);
                selectObject[item.order_code] = item;
            });
            let response = await this.$http("Order.batchPayCheck", {
                order_code: codes.join("|"),
            });


            if (response.code === 0) {
                let total = 0;
                let stock = [];
                let unpaid = [];

                (response.data || []).map((item) => {
                    let select = selectObject[item.order_code];
                    if (select) {

                        this.$set(select, "state", item.state);
                        item.state != 0 && this.$set(select, "error", item.msg || 'Out of stock');

                        if (item.state == 0) {
                            total += select.total_money;
                            unpaid.push(select);
                        } else {
                            stock.push(select);
                        }
                    }
                });

                this.payinfo.total = total;
                this.payinfo.stock = stock;
                this.payinfo.unpaid = unpaid;
                this.loading = false;
            } else {
                this.select.map((item) => {
                    this.$set(item, "state", 1);
                    this.$set(item, "error", response.msg);
                });

                this.payinfo.total = 0;
                this.payinfo.stock = this.select.slice(0);
                this.payinfo.unpaid = [];
                this.loading = false;
                this.error = response.msg;
            }
        },
    },
    created () {
        this.getOrderStatue();
    },
};
</script>
<style lang="scss" scoped>
.bulkpay-check {
    box-sizing: border-box;
    height: calc(100vh - 80px);
    width: calc(100vw - 80px);
    min-width: 900px;
    max-width: 1100px;
    max-height: 800px;
    background: #f8f8f8;
    border-radius: 12px;
    padding-top: 96px;
    position: relative;
    display: flex;
    align-items: flex-start;

    &>h2 {
        position: absolute;
        display: flex;
        left: 0;
        top: 0;
        width: 100%;
        padding: 32px 14px 28px;
        height: 96px;
        box-sizing: border-box;

        &>img {
            width: 28px;
            height: 28px;
        }

        &>strong {
            font-size: 28px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000000;
            line-height: 32px;
            margin-left: 8px;
        }
    }

    &>.loading {
        border-radius: 12px;
    }
}

.bulkpay-table {
    padding-left: 14px;
    padding-bottom: 14px;
    box-sizing: border-box;
    flex: 1;
    overflow: auto;
    max-height: calc(100%);

    .table-title {
        display: flex;
        border: 1px solid #e6e6e6;
        background: #fff;
        border-radius: 8px 8px 0 0;

        p {
            padding: 0 10px;
            display: flex;
            flex: 1;
        }

        span {
            width: 20%;
            box-sizing: border-box;
            font-size: 14px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #292929;
            line-height: 16px;
            padding: 8px 0;
            position: relative;
            padding-left: 18px;
            padding-right: 18px;

            &:nth-child(2) {
                width: 16%;
            }

            &:nth-child(3) {
                width: 24%;
            }
        }
    }

    .table-body {
        padding: 0 10px 10px;
        border: 1px solid #e6e6e6;
        border-radius: 0 0 8px 8px;
        background: #fff;
        border-top: none;
        display: flex;
        flex-direction: column;

        li {
            display: flex;
            margin-top: 10px;
            padding: 12px 0;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #000000;
            line-height: 16px;
            border-radius: 8px;
            position: relative;
            height: 24px;

            &:nth-child(2n) {
                background: #f6f6f6;
            }

            &>* {
                width: 20%;
                box-sizing: border-box;
                padding-left: 18px;
                padding-right: 18px;

                &:nth-child(2) {
                    width: 16%;
                }

                &:nth-child(3) {
                    width: 24%;
                }
            }

            & p {
                display: flex;
                flex-direction: row;
                align-items: center;
            }

            .table-status {
                p {
                    display: inline-block;
                    background-color: rgba($color: #757575, $alpha: 0.08);
                    color: #757575;
                    height: 24px;
                    line-height: 24px;
                    max-width: 100%;
                    border-radius: 24px;
                    padding: 0 10px 0 18px;
                    box-sizing: border-box;
                    font-size: 12px;
                    font-family: Roboto-Medium, Roboto;
                    font-weight: 400;
                    position: relative;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    position: relative;

                    &::before {
                        content: '█';
                        position: absolute;
                        left: 10px;
                        top: 50%;
                        width: 4px;
                        height: 4px;
                        margin-top: -2px;
                        border-radius: 4px;
                        overflow: hidden;
                        line-height: 0px;
                        font-size: 100px;
                        text-align: center;
                    }

                    &[status='success'] {
                        color: #008552;
                        background-color: rgba($color: #008552, $alpha: 0.08);
                    }

                    &[status='warning'] {
                        color: #e37e00;
                        background-color: rgba($color: #e37e00, $alpha: 0.1);
                    }

                    &[status='error'] {
                        color: #c62828;
                        background-color: rgba($color: #c62828, $alpha: 0.08);
                    }
                }
            }
        }
    }

    .currency-rate {
        justify-content: flex-start;
    }
}

.bulkpay-success {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-left: 18px;
    margin-right: 18px;
    width: 228px;
    background: #f9f6ed;
    border: 1px solid #e3dfd5;
    border-radius: 12px;

    figure {
        position: absolute;
        left: 50%;
        top: -20px;
        margin-left: -20px;
        width: 40px;
        height: 40px;
        background: #31ca8f;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
        border: 2px solid #1ebb7f;
        border-radius: 40px;
        display: flex;
        align-items: center;
        justify-content: center;

        svg {
            width: 16px;
            height: 16px;
            color: #fff;
        }
    }

    p {
        padding: 42px 26px 22px;
        font-size: 18px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #008552;
        line-height: 24px;
        text-align: center;
        position: relative;

        &::before {
            content: '';
            position: absolute;
            border: 1px solid #e3dfd5;
            border-color: #e3dfd5 #e3dfd5 transparent transparent;
            bottom: -3px;
            width: 5px;
            height: 5px;
            left: -3px;
            transform: rotate(45deg);
            background: #f8f8f8;
        }

        &::after {
            content: '';
            position: absolute;
            border: 1px solid #e3dfd5;
            border-color: #e3dfd5 #e3dfd5 transparent transparent;
            bottom: -3px;
            width: 5px;
            height: 5px;
            right: -3px;
            transform: rotate(-135deg);
            background: #f8f8f8;
        }
    }

    .currency-rate {
        display: flex;
        margin: 0 12px;
        border-top: 1px dashed #e3dfd5;
        padding: 30px 0;
        font-size: 16px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 400;
        color: #3d3d3d;
        line-height: 22px;

        &::before {
            content: 'Total:';
            font-family: Roboto-Regular, Roboto;
            margin-right: 4px;
        }
    }
}

.bulkpay-payment {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: 36px;
    margin-left: 18px;
    margin-right: 18px;
    width: 228px;

    &>h2 {
        font-size: 24px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 32px;
        text-align: center;
    }

    &>h3 {
        margin-top: 32px;
        font-size: 16px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 22px;
        text-align: center;
        margin-bottom: 32px;
    }

    .bulkpay-payment-status {
        display: flex;
        align-items: center;
        height: 36px;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #e6e6e6;
        padding: 0 12px;
        margin-bottom: 10px;

        strong {
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #000000;
            line-height: 16px;
            flex: 1;
        }

        span {
            font-size: 14px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #c62828;
            line-height: 16px;
        }
    }

    .bulkpay-payment-amount {
        display: flex;
        flex-direction: column;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #e6e6e6;

        p {
            display: flex;
            justify-content: space-between;
            padding: 28px 12px;

            &>strong {
                font-size: 14px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #000000;
                line-height: 16px;
            }

            &>span {
                font-size: 14px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                color: #000000;
                line-height: 16px;
            }
        }

        .currency-rate {
            border-top: 1px dashed #e6e6e6;
            padding-top: 44px;
            margin-left: 12px;
            margin-right: 12px;
            display: flex;
            position: relative;
            justify-content: flex-end;
            color: #000000;
            height: 26px;

            &::before {
                content: 'Total:';
                position: absolute;
                left: 0;
                top: 16px;
                font-size: 16px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                color: #000000;
                line-height: 18px;
            }

            &::v-deep {
                align-items: flex-end;

                span[name='unit'] {
                    font-size: 14px;
                    font-family: Roboto-Medium, Roboto;
                    font-weight: 500;
                    color: #000000;
                    line-height: 14px;
                    margin-right: 4px;
                }

                span[name='price'] {
                    font-size: 24px;
                    font-family: Roboto-Medium, Roboto;
                    font-weight: 500;
                    color: #000000;
                    line-height: 24px;
                }
            }
        }

        button {
            margin: 12px;
            height: 40px;
        }
    }
}
</style>
